<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Course, CourseAttendanceRecord } from '@/types/student'
import { GetStudentAttendanceList, getStudentCourseList } from '@/api/student'
import { ElMessage } from 'element-plus'

// 表格数据
const tableData = ref<Course[]>()
// 签到记录弹框的可见性
const dialogVisible = ref(false)
// 签到记录数据
const attendanceRecords = ref<CourseAttendanceRecord[]>()

// 加载表格数据
const loadTableData = async () => {
  const response = await getStudentCourseList()
  tableData.value = response.data
}

// 签到按钮点击事件
const handleSignIn = async (row: Course) => {
  // TODO: 实现签到功能
  console.log('签到课程:', row.courseName)
  const queryResult = await GetStudentAttendanceList(row.courseName)
  console.log('签到结果:', queryResult)
  if (queryResult.data.length === 0) {
    ElMessage.error('该课程还没有签到记录')
    return
  }
  attendanceRecords.value = queryResult.data
  dialogVisible.value = true
}

onMounted(() => {
  loadTableData()
})
</script>

<template>
  <div class="course-container">
    <!-- 课程表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column prop="teacherName" label="任课教师" />
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleSignIn(scope.row)"
            >查看签到情况</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 签到记录弹框 -->
    <el-dialog v-model="dialogVisible" title="签到记录" width="30%">
      <el-table :data="attendanceRecords" border style="width: 100%">
        <el-table-column prop="date" label="签到时间" />
        <el-table-column prop="isPresent" label="是否签到">
          <template #default="scope">
            <el-tag :type="scope.row.isPresent ? 'success' : 'danger'">
              {{ scope.row.isPresent ? '已签到' : '未签到' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>
.course-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}
</style>
